<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
    <script src="/EjemploVersionado/ext-3.3.1/adapter/ext/ext-base.js"></script>
	<script src="/EjemploVersionado/ext-3.3.1/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="/EjemploVersionado/ext-3.3.1/resources/css/ext-all.css" />

 </head>

 <body>
<div id="abc">  </div>
 </body>

 <script language="JavaScript">

Ext.override(Ext.data.Store,{
    addField: function(field){
        field = new Ext.data.Field(field);
        this.recordType.prototype.fields.replace(field);
        if(typeof field.defaultValue != 'undefined'){
            this.each(function(r){
                if(typeof r.data[field.name] == 'undefined'){
                    r.data[field.name] = field.defaultValue;
                }
            });
        }
    },
    removeField: function(name){
        this.recordType.prototype.fields.removeKey(name);
        this.each(function(r){
            delete r.data[name];
            if(r.modified){
                delete r.modified[name];
            }
        });
    }
});
Ext.override(Ext.grid.ColumnModel,{
    addColumn: function(column, colIndex){
        if(typeof column == 'string'){
            column = {header: column, dataIndex: column};
        }
        var config = this.config;
        this.config = [];
        if(typeof colIndex == 'number'){
            config.splice(colIndex, 0, column);
        }else{
            colIndex = config.push(column);
        }
        this.setConfig(config);
        return colIndex;
    },
    removeColumn: function(colIndex){
        var config = this.config;
        this.config = [config[colIndex]];
        config.splice(colIndex, 1);
        this.setConfig(config);
    }
});
Ext.override(Ext.grid.GridPanel,{
    addColumn: function(field, column, colIndex){
        if(!column){
            if(field.dataIndex){
                column = field;
                field = field.dataIndex;
            } else{
                column = field.name || field;
            }
        }
        this.store.addField(field);
        return this.colModel.addColumn(column, colIndex);
    },
    removeColumn: function(name, colIndex){
        this.store.removeField(name);
        if(typeof colIndex != 'number'){
            colIndex = this.colModel.findColumnIndex(name);
        }
        if(colIndex >= 0){
            this.colModel.removeColumn(colIndex);
        }
    }
});


 var grid = new Ext.grid.EditorGridPanel({
    
    renderTo:'abc',
    title: 'ADD Delete Columns',    
    collapsible: true,    
    width:500,
    height:300,
    store: new Ext.data.SimpleStore({
        fields: ['A', 'B'],
        data: [['ABC', 'DEF'], ['GHI', 'JKL']]
    }),
    columns: [
        {header: 'A', dataIndex: 'A'},
        {header: 'B', dataIndex: 'B'}
    ],
    tbar:[
        {
            xtype:'button',
            text: 'Add Column',            
            handler: onAdd

        },{
            xtype:'button',
            text: 'Delete Column',
            handler:onDelete
        }
        ]
});
    
    
    function showResultText(btn, text){
       // Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
       grid.addColumn(text);
    };
 
 
 
    function deleteColumn(btn, text){
       // Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
       grid.removeColumn(text);
    };
    function onAdd(btn, ev) {
        Ext.MessageBox.prompt('Column Name', 'Please enter column name:', showResultText);
    }
    /**
     * onDelete
     */
    function onDelete() {
        Ext.MessageBox.prompt('Column Name', 'Please enter column name:', deleteColumn);       
    }

//grid.addColumn('C');
//grid.addColumn({name: 'D', defaultValue: 'D'}, {header: 'D', dataIndex: 'D'});
//    grid.removeColumn('B');


 </script>
</html>